<template>
  <div>
    <!-- 当window.devicePixelRatio为2的时候 -->
    <!-- <canvas ref="canvas" width="1600" height="1200">对不起，您的浏览器不支持</canvas> -->
    <canvas ref="canvas" width="800" height="600">对不起，您的浏览器不支持</canvas>
  </div>
</template>

<script setup>
// 为了获取到canvas dom
import {ref,onMounted} from 'vue'

// 获取canvas dom引用
// 注意一定不要用dom操作
// const canvas = document.querySelector("#canvas")

//ts写法：
// const canvas = ref<HTMLCanvasElement|null>(null)
// 这里直接
const canvas = ref(null)

onMounted(() => {
  // 1.获取canvas dom
  // 2.获取绘制上下文
  const ctx=canvas.value.getContext('2d')  //还可以是webgl(这里参考three.js)
  // 画笔的概念
  // 假设你现在在用毛笔练书法
  // 按下去
  ctx.beginPath()
  // 开始写字
  ctx.moveTo(0,0)
  // ctx.lineTo(200,200)   //当window.devicePixelRatio为2的时候
  ctx.lineTo(100,100)
  // 设置画笔
  // fill 填充 
  // stroke 描边
  ctx.strokeStyle='red'
  // 画文字
  ctx.font="48px serif"
  ctx.fillText("Hello world",100,200)  //content,x,y
  ctx.stroke()

  // canvas是位图，需要处理缩放的问题，很多图表或图画，渲染后会模糊，因此一般都是*2或*3这样
  // svg是矢量图
  // 怎么获取浏览器设备的像素比
  console.log("window.devicePixelRatio",window.devicePixelRatio); 

  
  // 回锋收笔
  ctx.closePath()

});
</script>

<style scoped>
canvas{
  background-color: #eee;
  width: 800px;   /* 这个是正常宽度 */
  height: 600px;  /* 这个是正常高度 */
}
</style>